<template>
    <div class="oeeDetail">
        <div class="card">
            <div class="cardTitle">
                <div class="date">
                    <span class="name">{{deviceName}}-设备OEE明细</span>
                    <el-date-picker
                        v-model="date"
                        type="date"
                        placeholder="日期"
                        size="mini"
                        :clearable="false"
                        @change="handleChange"
                        >
                    </el-date-picker>
                </div>
                <el-button type="text" icon="el-icon-back" @click="$router.push('/equipmentBoard/screen')">返回</el-button>
            </div>
            <div class="visualization">
                <div class="visualName">
                    <div class="icon"></div>
                    <span>OEE时序图</span>
                </div>
                <echartCommon ref="sequence" id-name="sequence" :chartHeight="'200px'"></echartCommon>
            </div>
            <div class="visualization">
                <div class="visualName">
                    <div class="icon"></div>
                    <span>OEE时序明细</span>
                </div>

                <!-- 表格 -->
                <table-list ref='tableList' :searchForm='searchForm' @getChart='getChart' style="margin-top:20px"></table-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        sequenceOption
    } from "./echartOptions.js";
    import echartCommon from "./echartCommon.vue";
    import * as echarts from 'echarts/core';
    import tableList from './tableList.vue'
    export default {
        data(){
            return{
                deviceName: '',
                searchForm:{
                    deviceId:'',
                    timeStart:'',
                    timeEnd:'',
                    page: 1,
                    limit: 10
                },
                date:new Date(),
                start:'yyyy-MM-dd 00:00:00',
                end:'yyyy-MM-dd 23:59:59',
            }
        },
        components: {
            echartCommon,
            tableList
        },
        mounted(){
            this.handleData()
        },
        methods:{
            handleData(){
                const {formatTime} = this.utils
                const {deviceId, deviceName} = this.$route.query
                this.deviceName = deviceName
                this.searchForm.deviceId = deviceId
                this.searchForm.timeStart = formatTime(this.date, this.start)
                this.searchForm.timeEnd = formatTime(this.date, this.end)
                this.$refs.tableList.getStatusLog(this.searchForm)
                this.$refs.tableList.getOeeChart({
                    deviceId,
                    timeStart:this.searchForm.timeStart,
                    timeEnd:this.searchForm.timeEnd
                })
            },
            getChart(chartData){
                this.$refs.sequence.show(sequenceOption(echarts,chartData))
            },
            handleChange(val){
                const {formatTime} = this.utils
                this.searchForm.timeStart = formatTime(val, this.start)
                this.searchForm.timeEnd = formatTime(val, this.end)
                this.handleData()
            }
        },
    }
</script>

<style lang="less" scoped>
    .oeeDetail{
        padding: 20px;
        overflow-y: auto;
        .card{
            border-radius: 15px 15px 0 0;
            // border: 1px solid rgb(196, 196, 196);
            .cardTitle{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                // border-bottom: 1px solid rgb(196, 196, 196);
                .date{
                    .name{
                        font-size: 16px;
                        font-weight: 650;
                        margin-right: 20px;
                    }
                }
            }

            .visualization{
                padding: 10px;
                .visualName{
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                    .icon{
                        background: #409EFF;
                        height: 17px;
                        margin-right: 5px;
                        width: 6px;
                    }
                    span{
                        color: #666;
                        font-size: 14px;
                        font-weight: 650;
                    }
                }
            }
        }
    }
</style>